<template>
  <div>
    <!-- 父传子
           <子组件标签  :属性名="值"   />
           子组件内  props:['属性名']
           单向数据流：子组件内不要修改父组件传入的值，
                      实际开发：栈不要修改，堆是可以修改的
                                基本数据类型不可修改，复杂数据类型是可以修改的

          子传父：子触发父的方法 
             <子组件标签   @方法名="父组件方法" /> 
             子组件内：this.$emit('方法名'，实参值)   
     -->
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :id="item.id"
      tip="开业大酬宾"
      @fn="appFn"
    ></MyProduct>
  </div>
</template>
<script>
import MyProduct from '@/components/my-product.vue'
export default {
  components: {
    MyProduct
  },
  data () {
    return {
      list: [
        { id: 1, proname: '超级好吃的棒棒糖', proprice: 18.8 },
        { id: 2, proname: '超级好吃的大鸡腿', proprice: 34.2 },
        { id: 3, proname: '超级无敌的冰激凌', proprice: 14.2 }
      ]
    }
  },
  methods: {
    appFn (id) {
      // 砍一次少0.1元
      const findItem = this.list.find(item => item.id === id)
      findItem.proprice = +(findItem.proprice - 0.1).toFixed(2)
      console.log('appFn')
    }
  }
}
</script>
<style></style>
